<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  const couponStatus = ref(1)
  const couponList = ref([])
  async function getCouponList() {
    const res = await http.request({
      url: '/api/user/myCoupon',
      method: 'POST',
      data: {
        page: 1,
        limit: 9999,
        status: couponStatus.value,
        is_use: 0,
        money: 0,
        id: 0,
      },
    })
    couponList.value = res.data
  }
  function chooseCoupon(index) {
    couponStatus.value = index
    getCouponList()
  }

  function gotoUse() {
    uni.reLaunch({
      url: '/pages/draw/index',
    })
  }
  //查看规则
  const rulepopup = ref()
  const ruleContent = ref('')
  function checkRules(index) {
    rulepopup.value.open('center')
    console.log(couponList.value[index].box_name.length)
    if (couponList.value[index].box_name == 0) {
      ruleContent.value =
        '当前优惠卷在所有的天选之人和无限冲锋中都可以使用噢，小主快去试试吧'
    } else {
      // const str=(couponList.value[index].box_name).join(,)
      ruleContent.value = `当前优惠卷可适用范围：${couponList.value[index].box_name}`
    }
  }
  function allreadyNow() {
    rulepopup.value.close('center')
  }
  onMounted(() => {
    getCouponList()
  })
</script>

<template>
  <view style="padding-bottom: 130rpx">
    <!-- //状态切换 -->
    <view class="status">
      <view
        class="available"
        :class="{ notuse: couponStatus == 1 }"
        @click="chooseCoupon(1)"
        >可使用</view
      >
      <view
        class="available"
        :class="{ notuse: couponStatus == 2 }"
        @click="chooseCoupon(2)"
        >已使用</view
      >
      <view
        class="available"
        :class="{ notuse: couponStatus == 3 }"
        @click="chooseCoupon(3)"
        >已过期</view
      >
    </view>
    <!-- //优惠券列表 -->
    <view
      class="status-list"
      v-for="(item, index) in couponList"
      :key="item.id"
      v-if="couponList.length"
    >
      <view
        class="coupon-money"
        :class="{ already: item.status == 2 || item.status == 3 }"
      >
        <view class="amount" v-if="item.type == 3">
          {{ item.discount * 10 }}折
        </view>
        <view class="amount" v-else>
          <text style="font-size: 32rpx">￥</text
          >{{ Number(item.money).toFixed(2) }}
        </view>
        <view class="way" v-if="item.type == 1"
          >满{{ Number(item.m_money).toFixed(2) }}元可用</view
        >
        <view class="way" v-if="item.type == 2">无门槛</view>
      </view>
      <view class="coupon-content">
        <view
          class="title"
          :class="{
            'allready-color': item.status == 2 || item.status == 3,
          }"
          >{{ item.title }}</view
        >
        <view
          class="time"
          :class="{
            'allready-color': item.status == 2 || item.status == 3,
          }"
          >有效期至{{ parseTime(item.pass_time, '{y}-{m}-{d}') }}</view
        >
        <view
          @click="checkRules(index)"
          class="rule"
          :class="{
            'allready-color': item.status == 2 || item.status == 3,
          }"
          >规则></view
        >
      </view>
      <view class="coupon-name" @click="gotoUse" v-if="item.status == 1">
        <view class="goto-use">立即使用</view>
      </view>
      <view class="coupon-already-use" v-if="item.status == 2"> </view>
      <view class="coupon-already-passtime" v-if="item.status == 3"> </view>
    </view>
    <!-- 缺省 -->
    <view
      class=""
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 200rpx;
      "
      v-else
    >
      <image
        src="https://ojqn.wm2177.com/wechat_imgs/coupon-null.png"
        style="width: 220rpx; height: 220rpx"
        mode=""
      ></image>
      <view
        class=""
        style="margin-top: 22rpx; font-size: 26rpx; color: #cacaca"
      >
        暂无优惠券
      </view>
    </view>

    <!-- 规则弹出层 -->
    <uni-popup ref="rulepopup" type="center">
      <view class="rulepopup-content">
        <view class="rule-content-title"> 使用规则 </view>
        <view class="rule-content-content">
          {{ ruleContent }}
        </view>
        <view class="rule-content-button" @click="allreadyNow"> 我知道了 </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: #fff;
    font-family: OPPOSans;
  }
  .status {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin: 20rpx auto;
    height: 100rpx;
    text-align: center;
    width: 95vw;
  }
  .available {
    width: 156rpx;
    height: 48rpx;
    font-weight: 400;
    background-color: #f7f7f7;
    color: #3d3d3d;
    border-radius: 300rpx;
    text-align: center;
    margin-left: 30rpx;
    line-height: 48rpx;
    font-size: 24rpx;
  }
  .notuse {
    background-color: $all-color;
    color: #3d3d3d;
  }
  .status-list {
    display: flex;
    align-items: center;
    width: 95vw;
    margin: 30rpx auto;
    background-color: #fff;
    height: 200rpx;
    border-radius: 10rpx;
    box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
  }
  .coupon-money {
    height: 146rpx;
    width: 176rpx;
    background-color: $all-color;
    margin-left: 30rpx;
    border-radius: 10rpx;
    color: #3d3d3d;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
  .already {
    background-color: #cdcdcd !important;
  }
  .allready-color {
    color: #cdcdcd !important;
  }
  .amount {
    font-size: 40rpx;
  }
  .way {
    line-height: 30rpx;
    font-size: 22rpx;
    font-weight: 400;
    text-align: center;
  }
  .coupon-content {
    flex-shrink: 0;
  }
  .coupon-name {
    border-radius: 10rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    height: 140rpx;
    width: 248rpx;
    padding-right: 22rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 30rpx auto;
    justify-content: flex-end;
    align-items: flex-end;
    margin-left: 30rpx;
  }
  .coupon-already-use {
    width: 128rpx;
    height: 128rpx;
    background: url('../../static/allready-use.png') no-repeat;
    background-size: contain;
    margin-left: 114rpx;
  }

  .coupon-already-passtime {
    width: 134rpx;
    height: 102rpx;
    background: url('../../static/allready-passtime.png') no-repeat;
    background-size: contain;
    margin-left: 114rpx;
  }
  .title {
    font-size: 32rpx;
    color: #3d3d3d;
    font-weight: 500;
  }
  .time {
    font-size: 22rpx;
    color: #9b9b9d;
  }
  .rule {
    font-size: 22rpx;
    color: #9b9b9d;
    margin-top: 30rpx;
  }
  .goto-use {
    border-radius: 23rpx;
    width: 122rpx;
    height: 46rpx;
    // border: 2rpx solid #7863ff;
    color: #3d3d3d;
    background-color: $all-color;
    font-size: 20rpx;
    font-weight: 600;
    line-height: 46rpx;
    text-align: center;
  }
  .rulepopup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 600rpx;
    height: 500rpx;
    padding: 50rpx 46rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 36rpx;
    .rule-content-title {
      margin-bottom: 54rpx;
      font-size: 40rpx;
      text-align: center;
    }
    .rule-content-content {
      height: 202rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      color: #9b9b9d;
    }
    .rule-content-button {
      width: 460rpx;
      height: 80rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
      border-radius: 40rpx;
      background-color: $all-color;
      text-align: center;
      line-height: 80rpx;
      font-size: 26rpx;
      color: #3d3d3d;
      font-weight: 600;
    }
  }
</style>
